<template>
  <div class="wholesale-detail">
    <div class="block">
      <header>
        <h2>报台详情</h2>
      </header>
      <section>
        <el-row :gutter="80">
          <el-col :span="9">
            报台单编号
            <span>{{ detailData.orderCode ? detailData.orderCode : '' }}</span>
          </el-col>
          <el-col :span="9">
            报台单状态
            <span>{{
              detailData.orderStatusName ? detailData.orderStatusName : ''
            }}</span>
          </el-col>
          <el-col :span="9">
            供应商
            <span>{{
              supplierVo.vendorName ? supplierVo.vendorName : ''
            }}</span>
          </el-col>
          <el-col :span="9">
            生产厂商
            <span>{{
              contractVo.supplierName ? contractVo.supplierName : ''
            }}</span>
          </el-col>
        </el-row>
      </section>
      <div class="hr" />
      <section>
        <el-row :gutter="80">
          <el-col :span="9">
            销售对象
            <span>{{
              detailData.saleTargetName ? detailData.saleTargetName : ''
            }}</span>
          </el-col>
          <el-col :span="9">
            销售日期
            <span>{{ detailData.saleDate ? detailData.saleDate : '' }}</span>
          </el-col>
          <el-col :span="9">
            产品线
            <span>{{
              contractVo.productLineName ? contractVo.productLineName : ''
            }}</span>
          </el-col>
          <el-col :span="9">
            产品总数量
            <span>{{
              detailData.productCount ? detailData.productCount : ''
            }}</span>
          </el-col>
          <el-col :span="9">
            产品总金额(元)
            <span>{{
              detailData.orderAmount ? detailData.orderAmount : ''
            }}</span>
          </el-col>
          <el-col :span="9">
            备注
            <span>{{ detailData.remark ? detailData.remark : '' }}</span>
          </el-col>
        </el-row>
      </section>
      <p style="height:8px;"></p>
    </div>
    <div class="block">
      <header>
        <h2>产品详情</h2>
      </header>
      <section>
        <el-editable
          v-loading="tableLoading"
          stripe
          :columns="C0LUMNS"
          :data="payload.content"
          :payload="payload"
          :need-pagination="true"
          height="400"
          @reload="reloadPagination"
        ></el-editable>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>其他信息</h2>
      </header>
      <section>
        <el-tabs v-model="activeName">
          <el-tab-pane label="附加信息" name="first">
            <el-form-renderer
              ref="expandFormRenderer"
              v-model="extend"
              class="form-renderer"
              :content="extend_model"
              inline
            />
            <!-- <h3 style="color:#999999;margin-left:40px;">暂无信息</h3> -->
          </el-tab-pane>
          <el-tab-pane label="发票信息" name="second">
            <div class="butBox">
              <el-button
                type="primary"
                size="mini"
                @click="addInvoiceItemValidate"
                >添加发票信息</el-button
              >
              <span style="color:red;"
                >可电脑上传文件及图片,也可通过手机扫码上传文件及图片</span
              >
            </div>
            <el-form
              ref="ruleForm"
              :model="invoiceData[ruleIndex]"
              :rules="rules"
              label-width="15px"
              class="ruleForm"
            >
              <el-editable
                v-loading="loading"
                height="400"
                :data="invoiceData"
                :columns="INVOICE_COLUMNS"
                stripe
              >
                <template slot="default-url" slot-scope="scope">
                  <el-form-item label=" " prop="url">
                    <TableUpload
                      :imgsrc="scope.row.url"
                      :imgname="scope.row.fileName"
                      :keystr="scope.$index"
                      @ReturnImgUrl="ReturnImgUrlInvoice"
                    ></TableUpload>
                  </el-form-item>
                </template>
                <!-- 其他根据file填写的字段 -->
                <!-- 新增加字段 --开票方-->
                <template slot="default-invoiceSellerName" slot-scope="scope">
                  <el-input
                    v-model="scope.row.invoiceSellerName"
                    :maxlength="30"
                    :disabled="scope.row.companyId ? true : false"
                  />
                </template>
                <!-- 发票代码（30位） -->
                <template slot="default-invoiceCode" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceCode">
                    <el-input
                      v-model="scope.row.invoiceCode"
                      maxlength="30"
                      :disabled="scope.row.companyId ? true : false"
                    />
                  </el-form-item>
                </template>
                <!-- 发票号（30位） -->
                <template slot="default-invoiceNum" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceNum">
                    <el-input
                      v-model="scope.row.invoiceNum"
                      maxlength="30"
                      :disabled="scope.row.companyId ? true : false"
                    />
                  </el-form-item>
                </template>
                <!-- 薪增加字段--校验码 -->
                <template slot="default-invoiceCheckCode" slot-scope="scope">
                  <el-input
                    v-model="scope.row.invoiceCheckCode"
                    :maxlength="30"
                    :disabled="scope.row.companyId ? true : false"
                  />
                </template>
                <!-- 发票抬头 -->
                <template slot="default-invoiceTittle" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceTittle">
                    <el-input
                      v-model="scope.row.invoiceTittle"
                      maxlength="30"
                      :disabled="scope.row.companyId ? true : false"
                    />
                  </el-form-item>
                </template>
                <!-- 发票金额 -->
                <template slot="default-invoiceAmount" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceAmount">
                    <el-input-number
                      v-model="scope.row.invoiceAmount"
                      :disabled="scope.row.companyId ? true : false"
                      :precision="2"
                      :min="0"
                      :max="999999999"
                    />
                  </el-form-item>
                </template>
                <!-- 开票日期 -->
                <template slot="default-invoiceDate" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceDate">
                    <el-date-picker
                      v-model="scope.row.invoiceDate"
                      :disabled="scope.row.companyId ? true : false"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                </template>
                <template slot="default-operation" slot-scope="scope">
                  <el-button
                    v-if="!scope.row.companyId"
                    type="text"
                    @click="deleteOne(scope, 1)"
                    >删除</el-button
                  >
                  <span v-else>--</span>
                </template>
              </el-editable>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="其他信息" name="third">
            <div class="butBox">
              <el-button type="primary" size="mini" @click="addOtherData"
                >添加附件</el-button
              >
              <span style="color:red;"
                >可电脑上传文件及图片,也可通过手机扫码上传文件及图片</span
              >
            </div>
            <el-editable
              height="400"
              :data="otherData"
              :columns="OTHER_COLUMNS"
              stripe
            >
              <template slot="default-fileUrl" slot-scope="scope">
                <TableUpload
                  :imgsrc="scope.row.fileUrl"
                  :imgname="scope.row.fileName"
                  :keystr="scope.$index"
                  @ReturnImgUrl="ReturnImgUrlOther"
                ></TableUpload>
              </template>
              <template slot="default-operation" slot-scope="scope">
                <el-button
                  v-if="!scope.row.companyId"
                  type="text"
                  @click="deleteOne(scope, 2)"
                  >删除</el-button
                >
                <span v-else>--</span>
              </template>
            </el-editable>
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>
    <el-dialog
      title="删除"
      custom-class="dialog-custom"
      :visible.sync="delDialogVisible"
      width="40%"
    >
      <h2>{{ dialogText }}</h2>

      <div class="delBtn">
        <el-button @click="delDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="subDelete">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
